<template>
  <div class="todo-filter">
    <button 
      @click="updateFilter('all')" 
      :class="{ active: filter === 'all' }"
    >
      全部事件
    </button>
    <button 
      @click="updateFilter('active')" 
      :class="{ active: filter === 'active' }"
    >
      待办事件
    </button>
    <button 
      @click="updateFilter('completed')" 
      :class="{ active: filter === 'completed' }"
    >
      已完成事件
    </button>
  </div>
</template>

<script setup>
import { storeToRefs } from 'pinia'
import { useTodoStore } from '../stores/todo'

const store = useTodoStore()
const { filter } = storeToRefs(store)
const { updateFilter } = store
</script>

<style scoped>
.todo-filter {
  margin-bottom: 20px;
}

.todo-filter button {
  padding: 5px 10px;
  margin: 0 5px;
  background: none;
  border: 1px solid #ddd;
  border-radius: 4px;
  cursor: pointer;
}

.todo-filter button.active {
  background-color: #42b983;
  color: white;
  border-color: #42b983;
}
</style>